<template>
  <div>
    <div>
      <p>配送方式</p>
      <ul>
        <li ref="li1" @click="choice('1')">蜂巢专送</li>
      </ul>
    </div>
    <div>
      <p>商家属性</p>
      <ul>
        <li ref="li8" @click="choice('8')">
          <span style="color: rgb(63, 189, 230); border-color: rgb(63, 189, 230);">品</span> 品牌商家
        </li>
        <li ref="li7" @click="choice('7')">
          <span style="color: rgb(153, 153, 153); border-color: rgb(153, 153, 153);">保</span>外卖保
        </li>
        <li ref="li9" @click="choice('9')">
          <span style="color: rgb(87, 169, 255); border-color: rgb(87, 169, 255);">准</span>准时达
        </li>
        <li ref="li5" @click="choice('5')">
          <span style="color: rgb(232, 132, 45); border-color: rgb(232, 132, 45);">新</span>新店
        </li>
        <li ref="li3" @click="choice('3')">
          <span style="color: rgb(255, 78, 0); border-color: rgb(255, 78, 0);">付</span>在线支付
        </li>
        <li ref="li4" @click="choice('4')">
          <span style="color: rgb(153, 153, 153); border-color: rgb(153, 153, 153);">票</span>开发票
        </li>
      </ul>
    </div>
    <div class="button">
      <input type="button" value="清空" @click="choice(false)" />
      <input type="button" :value="num?`确定(${num})`:`确定`" @click="search" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['params'],
  data() {
    return {
      num: 0, //已选数量
      order_by: null,
      delivery_mode: [], //配送方式
      support_ids: [], //餐馆支持特权的id
      offset: 0 //跳过多少条数据
    }
  },
  methods: {
    choice(i) {
      if (!i) {
        for (let ref in this.$refs) {
          this.$refs[ref].style = ''
          this.delivery_mode = []
          this.support_ids = []
        }
        return
      }
      if (i == 1) {
        if (this.delivery_mode.indexOf(i) == -1) {
          this.$refs[`li${i}`].style.backgroundColor = '#56d176'
          this.$refs[`li${i}`].style.color = 'white'
          this.delivery_mode.push(i)
        } else {
          this.delivery_mode.splice(this.delivery_mode.indexOf(i), 1)
          this.$refs[`li${i}`].style = ''
        }
        return
      }
      if (this.support_ids.indexOf(i) == -1) {
        this.$refs[`li${i}`].style.backgroundColor = '#56d176'
        this.$refs[`li${i}`].style.color = 'white'
        this.support_ids.push(i)
      } else {
        this.support_ids.splice(this.support_ids.indexOf(i), 1)
        window.console.log(this.support_ids)
        this.$refs[`li${i}`].style = ''
      }
    },
    search() {
      this.$emit('getList', {
        delivery_mode: this.delivery_mode,
        support_ids: this.support_ids,
        New: true
      })
      this.$emit('Appear', 'screenMenu')
      this.$emit('off', 'screenMenu')
    },
    Record() {
      // window.console.log(this.params)
      let { delivery_mode, support_ids } = this.params
      this.delivery_mode = delivery_mode == '' ? [] : delivery_mode
      this.support_ids = support_ids == '' ? [] : support_ids
      if (this.delivery_mode.length >= 1) {
        this.delivery_mode.forEach(item => {
          this.$refs[`li${item}`].style.backgroundColor = '#56d176'
          this.$refs[`li${item}`].style.color = 'white'
        })
      }
      if (this.support_ids.length >= 1) {
        this.support_ids.forEach(item => {
          this.$refs[`li${item}`].style.backgroundColor = '#56d176'
          this.$refs[`li${item}`].style.color = 'white'
        })
      }
    }
  },
  mounted() {
    this.Record()
  }
}
</script>
<style  scoped>
div {
  width: 100%;
  background-color: white;
}
p {
  font-size: 0.6rem;
  height: 1.5rem;
  line-height: 1.5rem;
  color: black;
  padding-left: 1rem;
  margin: 0;
}
ul {
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 0.5rem;
  background-color: #fff;
  margin: 0;
}
li {
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  border: 0.025rem solid #eee;
  width: 4.7rem;
  height: 1.4rem;
  margin-right: 0.25rem;
  border-radius: 0.125rem;
  padding: 0 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.6rem;
}
span {
  width: 0.9rem;
  height: 0.9rem;
  font-size: 0.6rem;
  border: 0.025rem solid #e4e4e4;
  border-radius: 0.15rem;
  margin-right: 0.25rem;
  line-height: 0.9rem;
  text-align: center;
}
.button {
  display: flex;
  justify-content: space-evenly;
  padding: 0.7rem 0;
  background-color: #f5f5f5;
}
.button > input {
  width: 45%;
  border: none;
}
.button > input:first-child {
  background-color: white;
  font-weight: bold;
}
.button > input:last-child {
  background-color: #56d176;
  font-weight: bold;
  color: white;
}
</style>
